import Vue from 'vue'
import store from '@/store'

/**
 * Action 权限指令
 * 指令用法：
 *  - 在需要控制 action 级别权限的组件上使用 v-action:[method] , 如下：
 *    <i-button v-action:add >添加用户</a-button>
 *    <a-button v-action:delete>删除用户</a-button>
 *    <a v-action:edit @click="edit(record)">修改</a>
 *
 *  - 当前用户没有权限时，组件上使用了该指令则会被隐藏
 *  - 当后台权限跟 pro 提供的模式不同时，只需要针对这里的权限过滤进行修改即可
 *
 *  @see https://github.com/vueComponent/ant-design-vue-pro/pull/53
 */
const action = Vue.directive('action', {
  inserted: (el, binding, vnode) => {
    const actionName = binding.arg || binding.value
    const node = vnode.context.$route
    // 由于在切换用户后，vnode的$route没有正常更新, 所以要去store里去最新的数据
    console.log(store.state.permission.routers)
    const each = (tree) => {
      for (let i = 0; i < tree.length; i++) {
        const treeNode = tree[i]
        if (treeNode.name === node.name) {
          node.meta.actions = treeNode.meta.actions
          break
        }
        if (treeNode.children && treeNode.children.length > 0) {
          each(treeNode.children)
        }
      }
    }
    each(store.state.permission.routers)
    const actions = node.meta.actions
    console.log(el, binding, vnode, this)
    if (!actions.find((action) => action.permission === actionName) && actionName !== '*:*:*') {
      ;(el.parentNode && el.parentNode.removeChild(el)) || (el.style.display = 'none')
    }
  },
})

export default action
